<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cart</title>

    <!----------引入css----------->
    <!--引入bootstrap css-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/cart.css">

    <!-----------引入js----------->
    <!--引入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!--引入bootstrap js-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--引入veu-->
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/header.css">

</head>
<body>

<div class="cart">
    <!--头部分-->
    <header>
        <myheader id="tagsApp" :category="category" :user="user"></myheader>
    </header>
    <!--主体部分-->
    <main class="container-fluid">
        <div class="row">
            <!--主体占位-->
            <div class="col-md-10 col-md-offset-1">
                <!--主体上部分-->
                <div class="col-md-12  cart-main-top">
                    <div class="col-md-2 cartname">
                        <span class="label label-primary">购物车</span>
                    </div>
                    <div class="col-md-1 col-md-offset-9">
                        <button type="button" class="btn btn-success continue-shopping"><a href="#">继续购物</a></button>
                    </div>

                </div>
                <!--主体下部分-->
                <div class="col-md-12" id="cartApp">
                    <!--购物车-->
                    <div class="col-md-8 cart-solid">
                        <table class="shop_table cart"  style="width:100%;">
                            <!--表头-->
                            <thead >
                            <tr style="height: 50px">
                                <th class="" colspan="3">商品</th>
                                <th class="">价格</th>
                                <th class="" width="150px">数量</th>
                                <th class="">合计</th>
                            </tr>
                            </thead>
                            <!--表体-->
                            <tbody v-for="(items,index) in cart.cartItemsVOList">
                            <tr style="height: 100px">
                                <th class=" ">
                                    <span class="glyphicon glyphicon-remove-circle" style="cursor: pointer" @click="deleteItems(items.itemsId,index)"></span>
                                </th>
                                <th class=" " width="100px">
                                    <img height="90px" width="90px" src="image/1.png" :src="items.image">
                                </th>
                                <th class="" v-text="items.itemsName">茉莉花茶</th>
                                <th class="" >￥<span v-text="items.utilPrice"></span></th>
                                <th class="" >
                                    <!--数量加减-->
                                    <div class="quantity buttons_added">
                                        <input type="button" value="-" id="cart-reduce" :class="'cart-reduce'+items.itemsId" @click="reduceCount(items.itemsId,items.itemsCount,index)">
                                        <input type="text" value="1"  id="cart-quantity" :class="'cart-quantity'+items.itemsId" :value="items.itemsCount" @blur="inputCount(items.itemsId)">
                                        <input type="button" value="+" id="cart-add" :class="'cart-add'+items.itemsId" @click="addCount(items.itemsId,items.itemsCount,index)">
                                    </div>
                                </th>
                                <th class=" " width="100px">￥<span v-text="items.total"></span></th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--结算-->
                    <div class="col-md-4">
                        <div>
                            <table class="cart-total table" style="width: 100%">
                                <thead>
                                <tr>
                                    <th colspan="2">购物车总计</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td >购物车小计</td>
                                    <td class="td-right" >￥<span v-text="cart.cartTotal"></span></td>
                                </tr>
                                <tr>
                                    <td>运费</td>
                                    <td class="td-right">免费配送</td>
                                </tr>
                                <tr>
                                    <td>订单总计</td>
                                    <td class="td-right" >￥<span v-text="cart.orderTotal"></span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-12">
                            <a style="text-decoration-line: none; color: white" href="checkout.html" class="btn btn-info" style="width: 100%">前往收银台</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </main>
    <!--尾部-->
    <footer></footer>
</div>

</body>
<script src="my/js/cart.js"></script>
<script src="my/js/header.js"></script>
<script src="my/js/headerApp.js"></script>

</html>